<template>
	<view class="edit-item">
		<view class="label">头像</view>
		<view class="edit-content">
			<button type="primary" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true"
				class="imageBtn">
				<image :src="state.formData.avatar + '?v=' +`${ Date.parse(new Date())}` " mode="aspectFill"
					class="showImage" v-if="state.formData.avatar">
				</image>
				<image src="../static/user.png" mode="aspectFill" class="showImage" v-else>
				</image>
			</button>
			<uni-icons type="forward" size="25" class="icon"></uni-icons>
		</view>
	</view>
	<view class="edit-item">
		<view class="label">昵称</view>
		<view class="edit-content">
			<input type="nickname" class="nickName" placeholder="请输入昵称" v-model="state.formData.nickName"
				@blur="getNickname" />
			<uni-icons type="forward" size="25" class="icon"></uni-icons>
		</view>
	</view>
	<!-- <view class="edit-item">
		<view class="label">手机号</view>
		<view class="edit-content">
			<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
				<input v-model="state.formData.wechatName" class="nickName">
			</button>
			<uni-icons type="forward" size="25" class="icon"></uni-icons>
		</view>
	</view> -->
	<view class="edit-item" @click="openEditPwd">
		<view class="label">修改密码</view>
		<view class="edit-content">
			<view> 点击此处进行修改</view>
			<uni-icons type="forward" size="25" class="icon"></uni-icons>
		</view>
	</view>
	<view class="edit-item" @click="loginUserOut" style="margin-top: 60rpx;border-top: 2rpx solid #eee;">
		<view class="label">退出登录</view>
		<view class="edit-content">
			<view> </view>
			<uni-icons type="forward" size="25" class="icon"></uni-icons>
		</view>
	</view>
	<!-- <view class="warn"  @click="loginUserOut">
		<button type='warn'>退出登录</button>
	</view> -->
	<uni-popup ref="editPop" type="bottom">
		<view class="edit-container">
			<view class="edit-item">
				<view class="label">原密码</view>
				<view class="">
					<input class="nickName" placeholder="请输入原密码" v-model="state.formData.hpassword" />
				</view>
			</view>
			<view class="edit-item">
				<view class="label">新密码</view>
				<view class="">
					<input class="nickName" placeholder="请输入新密码" v-model="state.formData.password" />
				</view>
			</view>
			<view class="edit-item">
				<view class="label">确认新密码</view>
				<view class="">
					<input class="nickName" placeholder="请确认新密码" v-model="state.formData.confirm" />
				</view>
			</view>
			<view class="btn">
				<button type="primary" @click="submitPwd">确定修改</button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		userInfo
	} from '@/stores/userInfo.js';
	import {
		updateAll,
		uploadFile,
		loginOut
	} from '@/api/login.js'
	import {
		center
	} from '@/api/study.js';
	const state = reactive({
		formData: {
			avatar: '', //头像
			nickName: '', //昵称
			// wechatName: '',
			hpassword: '', //旧密码
			password: '', //新密码
			confirm: '' //确认新密码
		},
		file: '', //上传的文件
		avatarBase64: '', //base64文件
		info:''
	})
	onShow(() => {
		// this.info = userInfo();
		// console.log(this.info,"个人数据");
		center().then(res => {
			state.formData.avatar = res.avatar
			state.formData.nickName = res.nick_name
			
		})
	})
	// 获取头像
	const onChooseAvatar = (e) => {
		console.log(e, '数据')
		const {
			avatarUrl
		} = e.detail // 此返回的路径为临时路径，需转换为永久路径保存使用
		state.file = e.target.avatarUrl
		state.formData.avatar = e.target.avatarUrl
		state.avatarBase64 = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(e.target.avatarUrl,
			'base64')
		// 获取到图片上传腐乳
		uploadFiles()
	}
	// 上传头像图片到云服务器
	const uploadFiles = () => {
		uploadFile({
			'file': state.avatarBase64,
			'format': "base64",
			'type': 1,
			'material_id': 1
		}).then(res => {
			state.formData.avatar = res.url
			updateAll({
				avatar: res.url
			}).then(res => {
				console.log(res, "44444");
			})
		}).catch(err => {
			console.log(err);
		})
	}
	// 获取昵称
	const getNickname = (e) => {
		console.log(e, "1111111111");
		state.formData.nickname = e.detail.value
		updateAll({
			nickname: e.detail.value
		}).then(res => {
			console.log(res);
		})
	}
	const editPop = ref()
	// 打开修改密码窗口
	const openEditPwd = () => {
		editPop.value.open('bottom')
	}
	const submitPwd = () => {
		if (state.formData.hpassword != '') {
			if (state.formData.password != '') {
				if (state.formData.confirm != '') {
					updateAll({
						hpassword: state.formData.hpassword,
						password: state.formData.password,
						confirm: state.formData.confirm,
					}).then(res => {
						console.log("修改成功", res);
						editPop.value.close()
						loginUserOut()
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "确认密码不能为空"
					})
				}
			} else {
				uni.showToast({
					icon: "none",
					title: "新密码不能为空"
				})
			}

		} else {
			uni.showToast({
				icon: "none",
				title: "原密码不能为空"
			})
		}

	}
	const loginUserOut = () => {
		state.info = userInfo();
		state.info.clearAll()
		loginOut()
		uni.clearStorageSync();
		uni.switchTab({
			url: '/pages/home/index'
		})
	}
	// 获取手机号
	const onGetPhoneNumber = (e) => {
		if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
			// 不允许授权
		} else {
			uni.getProvider({
				service: 'oauth',
				success: function(res) {
					let provider = res.provider[0]
					let encryptedData = e.detail.encryptedData
					let iv = e.detail.iv
					let appid = 'wx77c53c63407158ab'
					getMobile({
						provider: provider,
						encryptedData: encryptedData,
						iv: iv,
						appid: appid
					}).then(res => {
						console.log(res);
						state.mobile = res.phoneNumber
					}).catch(err => {
						console.log(err);
					})
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.edit-item {
		width: 100%;
		padding: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #eee;
		background-color: #fff;

		.label {
			flex: 1;
		}

		.edit-content {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 2rpx solid #eee
			}

			.icon {
				padding: 0 40rpx;
				padding-right: 60rpx;
			}

			.imageBtn {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: none;
				position: relative;
				background-color: #ccc;
				padding: 10rpx;
			}

			.showImage {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 0;
			}

			.nickName {
				font-size: 28rpx;
				color: #666666;
				flex: 1;
				text-align: right;
			}
		}
	}

	.btn {
		padding: 20rpx;

		:deep button {
			background-color: #007aff;
		}
	}
	.warn{
		padding: 20rpx;
	}

	.edit-container {
		padding: 40rpx;
		background-color: #fff;
	}
</style>
